<template>
  <div class="modeldetail">
    <div>
      <el-button
        type="primary"
        @click="onConfirm('ruleForm')"
        :loading="loading"
        >保存</el-button
      >
    </div>
    <div class="modeldetail-two">
      <div class="modeldetail-weight">用户基本信息</div>
      <div style="margin-top: 30px">
        <el-form
          :inline="true"
          :model="detail"
          label-position="top"
          ref="ruleForm"
        >
          <div>
            <el-form-item label="用户名" prop="name">
              <el-input
                v-model="detail.name"
                placeholder="请输入用户名"
                clearable
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="工厂名称" prop="factory_name">
              <el-input
                v-model="detail.factory_name"
                placeholder="请输入工厂名称"
                clearable
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="modeldetail-two" style="margin-top: 20px">
      <div class="modeldetail-weight">添加用户身份</div>
      <div style="margin-top: 30px">
        <el-tabs v-model="activeName" @tab-click="handleClick">

          <el-tab-pane label="工厂小程序" name="3">
            <el-select v-model="form.home_level" placeholder="请选择用户身份">
              <el-option
                v-for="item in tusersrolelist"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-tab-pane>
          <el-tab-pane label="工厂客户端" name="4">
            <el-select v-model="form.pc_level" placeholder="请选择用户身份">
              <el-option
                v-for="item in tusersrolelist"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- <div class="modeldetail-two" style="margin-top: 20px">
      <div class="modeldetail-weight">修改密码</div>
      <div style="margin-top: 30px"></div>
    </div> -->
  </div>
</template>

<script>
import {
  postAdminApiCodeSetFactoryUser,
  postAdminCodeGetFactoryUserInfo,
  postAdminUserGetusersrolelist,
} from "@/api";
export default {
  data() {
    return {
      loading: false,
      activeName: "3",
      detail: {},
      form: {
        id: "",
        home_level: "",
        pc_level: "",
        admin_level: "",
        newpwd: "",
        confirmnewpwd: "",
      },
      tusersrolelist: [],
    };
  },
  async activated() {
    await this.postAdminUserGetusersrolelist(this.activeName);
    if (this.$route.query.id) {
      this.postAdminCodeGetFactoryUserInfo(this.$route.query.id);
    }
  },
  methods: {
    // 标签改变时
    handleClick(e) {
      this.postAdminUserGetusersrolelist(this.activeName);
    },
    // type改变时
    onChangType(e) {
      console.log("e", e);
      this.postAdminUserPermission_list(e);
    },
    // 权限身份列表
    async postAdminUserGetusersrolelist(type) {
      let obj = {
        type,
      };
      await postAdminUserGetusersrolelist(obj).then((res) => {
        console.log("权限身份列表------------>", res);
        let obj = {
          id:"",
          title:"暂无身份"
        }
        let data = res.data
        data.unshift(obj)
        this.tusersrolelist = data;
      });
    },
    // 详情
    async postAdminCodeGetFactoryUserInfo(id) {
      let obj = {
        id,
      };
      await postAdminCodeGetFactoryUserInfo(obj).then((res) => {
        let data = res.data;
        this.detail = res.data;
        this.form = {
          id: data.id,
          home_level: data.home_level,
          pc_level: data.pc_level,
          newpwd: "",
          confirmnewpwd: "",
        };
      });
    },

    onConfirm(e) {
      let that = this;
      that.loading = true;
      postAdminApiCodeSetFactoryUser(that.form).then((res) => {
        console.log("保存", res);
        that.$set(that.form, "id", res.data);
        that.$message.success("保存成功");
      });
      that.loading = false;
      that.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.identitycollapseitem:not(:nth-last-child(1)) {
  border-bottom: 1px solid #eee;
}
.identitycollapseitem {
  display: flex;
  justify-content: space-between;
  padding: 10px 50px;

  > div {
    display: flex;
  }
}

.myelform {
  display: flex;
  justify-content: space-between;
}
.modeldetail {
  margin-top: 10px;
  &-one {
    display: flex;
    justify-content: space-between;
    > div:nth-child(1) {
      font-weight: 800;
    }
  }
  &-two {
    padding: 20px;
    border-radius: 4px;
    background: #ffffff;
  }
  &-weight {
    font-size: 20px;
    font-weight: 800;
  }
}
</style>